<template>
  <div class="MyHandover">
    <van-tabs
      title-active-color="#f5a623"
      sticky
      color="#f5a623"
      v-model="active"
    >
      <van-tab :title="`正在交接（${list.length}）`">
        <div v-if="list.length > 0">
          <MyHandoverItem
            v-for="(item, index) in list"
            :key="index"
            :data="item"
            :exportCargo="exportCargoList"
            type="1"
          />
        </div>
        <van-empty description="没有更多了~" v-else />
      </van-tab>
      <van-tab :title="`已完成交接（${list1.length}）`">
        <!-- 筛选 -->
        <MyHandoverScreen @changeParams="changeParams" />
        <!-- 统计 -->
        <Count :data="count" />
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getHandoverList"
        >
          <div v-if="list1.length > 0">
            <MyHandoverItem
              v-for="(item, index) in list1"
              :key="index"
              :data="item"
              :exportCargo="exportCargoList"
              type="0"
            />
          </div>
          <van-empty v-else />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, List, Empty } from "vant";
import {
  getNothandedOver,
  getHandoverList,
  getHandoverListOldCount,
  getExportCargo,
} from "./../services/api";
import MyHandoverScreen from "@/components/MyHandoverScreen.vue";
import MyHandoverItem from "@/components/MyHandoverItem.vue";
import Count from "@/components/Count";
Vue.use(Empty);
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      params: {
        masterWaybillLike: "",
        consigneeBillNo: "",
        deliverGoodsTimeStart: "",
        deliverGoodsTimeEnd: "",
        pageNum: 1,
        pageSize: 20,
      },
      active: 0,
      loading: false,
      finished: false,
      list: [],
      list1: [],
      count: {
        numTotal: 0,
        total: 0,
        weightTotal: 0,
      },
      exportCargoList: [],
    };
  },
  created() {
    this.getNothandedOver();
    this.getHandoverListOldCount();
    this.getHandoverList();
    this.getExportCargo();
  },
  mounted() {
    window["reload"] = () => {
      this.getNothandedOver();
      this.getHandoverListOldCount();
      this.params.pageNum = 1;
      this.finished == false;
    };
  },
  methods: {
    // 获取正在交接的货品
    getNothandedOver() {
      getNothandedOver().then((res) => {
        this.list = res;
      });
    },
    // 获取已完成交接的数据
    getHandoverList() {
      getHandoverList(this.params)
        .then((res) => {
          if (res) {
            this.loading = false;
            if (this.params.pageNum == 1) {
              this.list1 = res;
            } else {
              this.list1 = this.list1.concat(res);
            }
            this.params.pageNum += 1;
          }
          if (res.length < 20) {
            this.finished = true;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 获取总统计数量
    getHandoverListOldCount() {
      getHandoverListOldCount().then((res) => {
        this.count = res;
      });
    },
    // 获取发货口数据
    getExportCargo() {
      getExportCargo().then((res) => {
        if (res) {
          this.exportCargoList = res;
        }
      });
    },
    // 子组件传值
    changeParams(e) {
      this.params = { ...e, pageNum: 1, pageSize: 20 };
      this.finished = false;
      this.getHandoverList();
    },
  },
  components: {
    MyHandoverScreen,
    MyHandoverItem,
    Count,
  },
};
</script>

<style lang="scss">
.MyHandover {
  .van-tabs__line {
    width: 50%;
  }
}
</style>